import React from 'react'
import Avatars from '../../../component/avatars'
import { RightOutlined, LeftOutlined } from '@ant-design/icons'
import { Table } from 'antd'
import { useSelector } from 'react-redux'
import { PendingIcon, PendingIcon1 } from "../../../utils/icons"

export default function Child() {
  const languages = useSelector((state) => state.publicReducer.language)
  const data = [
    {
      key: '1',
      날짜: '2022.11.29',
      코인명: 'EOS',
      매도가격: '1,550',
      수량: '1,550,000',
      결과: "체결",
      처리일자: "2022.11.10",
      금액: "1,580",
      손익: "1,500"
    },
    {
      key: '2',
      날짜: '2022.11.28',
      코인명: 'EOS',
      매도가격: '1,550',
      수량: '1,550,000',
      결과: "병합",
      처리일자: "2022.11.11",
      금액: "1,580",
      손익: "1,500"
    },
    {
      key: '3',
      날짜: '2022.11.27',
      코인명: 'ADA',
      매도가격: '1,550',
      수량: '1,550,000',
      결과: "삭제",
      처리일자: "2022.11.11",
      금액: "-",
      손익: "-"
    },
    {
      key: '4',
      날짜: '2022.11.29',
      코인명: 'EOS',
      매도가격: '1,550',
      수량: '1,550,000',
      결과: "체결",
      처리일자: "2022.11.10",
      금액: "1,580",
      손익: "1,500"
    },
    {
      key: '5',
      날짜: '2022.11.28',
      코인명: 'EOS',
      매도가격: '1,550',
      수량: '1,550,000',
      결과: "병합",
      처리일자: "2022.11.11",
      금액: "1,580",
      손익: "1,500"
    },
    {
      key: '6',
      날짜: '2022.11.27',
      코인명: 'ADA',
      매도가격: '1,550',
      수량: '1,550,000',
      결과: "삭제",
      처리일자: "2022.11.11",
      금액: "-",
      손익: "-"
    },
  ]
  const columns = [
    {
      title: languages === "Korean" ? "날짜" : (languages === "Chinese" ? "日期" : "Date"),
      key: '날짜',
      dataIndex: '날짜',
      align:"center",
    },
    {
      title: languages === "Korean" ? "코인명" : (languages === "Chinese" ? "币名" : "Coin"),
      key: '코인명',
      dataIndex: '코인명',
      align:"center",
    },
    {
      title: languages === "Korean" ? "매도 가격" : (languages === "Chinese" ? "卖出价" : "Sell price"),
      dataIndex: '매도가격',
      key: '매도가격',
      align:"center",
      render: (row) => "₩" + row
    },
    {
      title: languages === "Korean" ? "수량" : (languages === "Chinese" ? "数量" : "Quantity"),
      key: '수량',
      dataIndex: '수량',
      align:"center",
    },
    {
      title: languages === "Korean" ? "결과" : (languages === "Chinese" ? "结果" : "Result"),
      key: '결과',
      dataIndex: '결과',
      align:"center",
    },
    {
      title: languages === "Korean" ? "처리 일자" : (languages === "Chinese" ? "处理日期" : "Processed date"),
      key: '처리일자',
      dataIndex: '처리일자',
      align:"center",
    },
    {
      title: languages === "Korean" ? "금액" : (languages === "Chinese" ? "价格" : "Price"),
      dataIndex: '금액',
      key: '금액',
      align:"center",
      render: (row) => row === "-" ? row : "₩" + row
    },
    {
      title: languages === "Korean" ? "손익" : (languages === "Chinese" ? "收益与损失" : "Profit and loss"),
      dataIndex: '손익',
      key: '손익',
      align:"center",
      render: (row) => row === "-" ? row : "₩" + row
    },
  ]
  return (
    <div className='Child'>
      <div className='nav'>
        <Avatars username={languages === "Korean" ? "미체결 결산 손익" : (languages === "Chinese" ? "待成交结算损益" : "Pending profit or loss")} balance="8,888,888" icon={<PendingIcon1 />} />
        <Avatars username={languages === "Korean" ? "Live 매수 미체결 금액" : (languages === "Chinese" ? "买入待成交金额" : "Live buy pending amount")} balance="8,888,888" icon={<PendingIcon />} />
      </div>
      <div className='main'>
        <p><i><LeftOutlined /></i> 2022{languages === "Korean" ? "년" : (languages === "Chinese" ? "年" : "Year")} 11{languages === "Korean" ? "월 " : (languages === "Chinese" ? "月" : "Month")} <i><RightOutlined /></i></p>
        <Table size={'middle'} columns={columns} dataSource={data} pagination={false} />
        <h4><span>{languages === "Korean" ? "더보기" : (languages === "Chinese" ? "更多" : "More")}</span></h4>
      </div>
    </div>
  )
}
